<template>
  <div class="CateList-body">
    <div class="body-nav">
      <van-tabs
        v-model:active="active"
        @click="changeList"
        :line-width="93"
        :line-height="1"
      >
        <van-tab
          v-for="item in navList"
          :title="item.title"
          :name="item.name"
          :key="item.id"
        >
        </van-tab>
        <div class="list" v-for="item in catelist" :key="item.id">
          <a href="">
            <div class="list-img">
              <img :src="item.pic" alt="" />
            </div>
          </a>
          <div class="cent">
            <a href="" class="title">
              <div class="product_title">
                <span class="tianmao"></span>
                <span class="title_txt">{{ item.d_title }}</span>
              </div>
            </a>
            <div class="product_info">
              <a href="" class="info">
                <div class="price">
                  <span>券后&nbsp;</span>
                  <span class="RMB">¥</span>
                  <span class="price_num">{{ item.jiage }}</span>
                </div>
                <div class="label_box">
                  <span class="box">
                    <span
                      class="label2"
                      v-for="(e, i) in item.label"
                      :key="i"
                      >{{ e.title }}</span
                    >
                    <span class="juan">
                      <span>劵</span>{{ item.quan_jine }}元
                    </span>
                  </span>
                </div>
                <div class="salse">
                  <span>已售{{ item.xiaoliang }}</span
                  ><span style="display: none">评论379</span>
                </div>
              </a>
              <div class="shop_name">
                <a href="?r=p/shop&amp;seller_id=3697280864"
                  >{{ item.shop_name }}<span>进店<van-icon name="arrow" /></span
                ></a>
              </div>
            </div>
          </div>
        </div>
        <div class="list" v-for="item in list" :key="item.id">
          <a href="">
            <div class="list-img">
              <img :src="item.pic" alt="" />
            </div>
          </a>
          <div class="cent">
            <a href="" class="title">
              <div class="product_title">
                <span class="tianmao"></span>
                <span class="title_txt">{{ item.d_title }}</span>
              </div>
            </a>
            <div class="product_info">
              <a href="" class="info">
                <div class="price">
                  <span>券后&nbsp;</span>
                  <span class="RMB">¥</span>
                  <span class="price_num">{{ item.jiage }}</span>
                </div>
                <div class="label_box">
                  <span class="box">
                    <span
                      class="label2"
                      v-for="(e, i) in item.label"
                      :key="i"
                      >{{ e.title }}</span
                    >
                    <span class="juan">
                      <span>劵</span>{{ item.quan_jine }}元
                    </span>
                  </span>
                </div>
                <div class="salse">
                  <span>已售{{ item.xiaoliang }}</span
                  ><span style="display: none">评论379</span>
                </div>
              </a>
              <div class="shop_name">
                <a href="?r=p/shop&amp;seller_id=3697280864"
                  >{{ item.shop_name }}<span>进店<van-icon name="arrow" /></span
                ></a>
              </div>
            </div>
          </div>
        </div>
      </van-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const route = useRoute();
    const store = useStore();

    const catelist: any = computed(() => store.state.cateList.catelist);
    const list: any = computed(() => store.state.cateList.list);
    const active = ref(0);
    const navList = ref([
      {
        id: 1,
        title: "人气",
        name: "t",
      },
      {
        id: 2,
        title: "最新",
        name: "latest",
      },
      {
        id: 3,
        title: "销量",
        name: "sell",
      },
      {
        id: 4,
        title: "价格",
        name: "price",
      },
    ]);
    onMounted(() => {
      changeList("t");
    });
    const changeList = (name: string) => {
      foodLIST(name);
      store.dispatch({
        type: "cateList/getCaleList",
        params: {
          type: name,
          cid: route?.params?.cid,
          r: route?.query.r || "class/cyajaxsub",
        },
      });
    };
    const foodLIST = (name: string) => {
      store.dispatch({
        type: "cateList/getFood",
        params: {
          type: name,
          cid: route?.params?.cid,
          r: "class/ajaxsub",
        },
      });
    };
    return {
      list,
      active,
      navList,
      catelist,
      changeList,
      foodLIST,
    };
  },
});
</script>
<style lang="stylus" scoped>
html, body, .CateList-page {
  height: 100%;
}

/deep/.van-tabs__wrap {
  position: fixed;
  top: 0.44rem;
  width: 100%;
  z-index: 60;
}

/deep/.van-tabs__content {
  position: absolute;
  top: 0.88rem;
  z-index: 50;
  width: 100%;
  padding-top: 0.05rem;
}

* {
  margin: 0;
  padding: 0;
}

div {
  margin: 0;
  border: none;
  padding: 0;
  outline: 0;
}

.list {
  height: 1.34rem;
  padding: 0.07rem 0 0 0.07rem;
  transform-origin: center;
  position: relative;
  z-index: 1;
  zoom: 1;
  border-bottom: 1px solid #F5F5F5;

  .list-img {
    float: left;
    position: relative;
    z-index: 1;
    zoom: 1;
    margin-right: 0.1rem;

    img {
      height: 1.26rem;
      width: 1.26rem;
      display: block;
      border-radius: 0.03rem;
    }
  }

  .cent {
    height: 1.26rem;
    position: relative;
    z-index: 1;
    zoom: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .title {
      .product_title {
        font-size: 0.14rem;
        font-weight: 400;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        align-items: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        line-height: 0.2rem;
        padding-right: 0.1rem;

        .tianmao {
          display: inline-block;
          background: url('../../assets/tm.png');
          background-size: 23px 13px;
          height: 0.13rem;
          width: 0.23rem;
          margin-right: 0.04rem;
        }
      }
    }

    .price {
      font-size: 0.1rem;
      font-weight: 400;
      color: #666;
    }

    .shop_name {
      font-size: 0.1rem;
      font-weight: 400;
      color: #888;

      a {
        color: #888;
        margin-right: 0.04rem;

        span {
          color: #333;
          margin-left: 0.04rem;
        }
      }
    }

    .salse {
      span {
        font-size: 0.1rem;
        font-weight: 400;
        color: #888;
      }
    }

    .product_info {
      width: 100%;
      height: 0.78rem;
    }

    .RMB {
      word-break: break-all;
      list-style: none;
      border: none;
      font-size: 0.12rem;
      font-weight: 500;
      color: #FF2B22;
      margin-left: 0.01rem;
    }

    .price_num {
      word-break: break-all;
      list-style: none;
      border: none;
      font-size: 0.19rem;
      font-weight: 500;
      color: #FF2B22;
    }

    .salse {
      height: 0.2rem;
    }

    .label_box {
      margin-right: 2px;
      height: 0.2rem;

      .label2 {
        height: 12px;
        border-radius: 2px;
        border: 1px solid;
        font-size: 9.5px;
        font-weight: 400;
        color: #F57223;
        padding: 0 3px;
        margin-right: 5px;
        display: inline-block;
        line-height: 12px;
        vertical-align: middle;
        border-color: rgba(245, 114, 36, 0.7);
      }

      .box {
        display: inline;
        height: 0.2rem;

        .juan {
          height: 0.14rem;
          background: linear-gradient(90deg, #ff8873 0, #ff4f4f 100%);
          border-radius: 2px;
          padding: 0 0.05rem 0 0.01rem;
          font-size: 0.1rem;
          font-weight: 400;
          color: #fff;
          line-height: 14px;
          display: inline-block;
          position: relative;
          z-index: 1;
          zoom: 1;
          top: 0;
          vertical-align: middle;
        }
      }
    }
  }
}

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #333;
}
</style>
